<template>
    <div class="playing-song-detail" ref="playingSongDetail">
        <!-- 返回顶部按钮 -->
        <el-backtop target=".playing-song-detail" :right="40" :bottom="75" id="playBackTop"></el-backtop>
        <!-- 关闭按钮 -->
		<span class="iconfont icon-down-arrow" @click="closeSongDetail"></span>
        <!-- 主要内容区域 -->
        <div class="main-content" v-if="Object.keys(nowSongDetail).length !==0">
            <!-- 顶部歌词相关内容 -->
            <div class="top-lyrics">
                <!-- 左侧旋转唱片 -->
                <div class="left-cover">
                    <!-- 唱片开开关旋转 -->
                    <div class="switchs switchRotate" :class="{swichsPlay:isPlaying,switchsPause:!isPlaying}">
                        <img src="~@/assets/imgs/cp1.png"/>
                    </div>
                    <!-- 唱片旋转 -->
                    <div class="record record-rotate" :class="{startRotate:isPlaying}" @click="isPlaying ? pausePlay() : startPlay()">
                        <img class="cp2" src="~@/assets/imgs/cp2.png" alt=""/>
                        <img class="cover" :src="cover" alt=""/>
                    </div>
                    <img :src="cover" class="song-bgImg"/>
                </div>
                <!-- 右侧歌词部分 -->
                <div class="right-lyrics">
                    <div class="hd">
                        <h2>{{nowSongDetail.name}}</h2>
                        <div>
                            专辑：<span>{{nowSongDetail.al.name}}</span>
                        </div>
                        <div>
                            歌手：<span>{{nowSongDetail.ar[0].name}}</span>
                        </div>
                    </div>
                    <!-- 歌词部分 -->
                    <div class="bd" id="scrollLyric" ref="scrollLyric">
                        <!-- 有歌词 -->
                        <ul v-if="formatlyric.length !== 0" >
                            <li v-for="(item,index) in formatlyric" :key="index" :class="{currentLyric : currentRow == index}"
                              @mouseover="showTime(index)"
                              @mouseleave="isActive = false"
                              @click="lyricClick(item)"
                            >
                               <!-- 展示暂停按钮 -->
                               <span class="playIcon" v-show="isActive && currentIndex == index">
                                    <i class="iconfont icon-play"></i>
                               </span>
                               <!-- 展示歌词 -->
                               <span class="lyric-item">{{item.text}}</span>
                               <span class="time" v-show="isActive && currentIndex == index">{{ item.time | formatDuration }}</span>
                            </li>
                        </ul>
                        <!-- 没有歌词 -->
                        <div v-else>
                            <h2>暂无歌词，请您欣赏</h2>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部评论相关内容 -->
            <div class="bot-content">

            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name:'',
    data() {
        return {
            formatlyric: [], //格式化后的歌词
            isActive:false,
            currentIndex:null // 鼠标检索的索引
        }
    },
    // 
     created(){
        // 获取当前播放歌曲的歌词
        if(Object.keys(this.nowSongDetail).length != 0){
            // 根据歌曲的id获取歌词
            this.getNowPlaingSongLyric(this.nowSongDetail.id);
        }
    },
    methods:{
        // 关闭歌曲详情页
        closeSongDetail(){
            this.$store.dispatch('showSongDetail')
        },
        // 暂停播放
        pausePlay(){
            this.$store.dispatch('changePlayState',false);
            document.querySelector('#audio').pause();
        },
        // 播放音乐
        startPlay(){
            this.$store.dispatch('changePlayState',true);
             document.querySelector('#audio').play();
        },
        // 根据歌曲的id，获取歌曲的歌词
        async getNowPlaingSongLyric(id){
            let resLyric = await this.$API.playmusic.getSongLyric(id);
            
            if(resLyric.code == 200){
                // 查看是否有歌词
                if(resLyric.nolyric)return;
                // 获取歌词
                let lyric = resLyric.lrc.lyric;
                // 整理歌词
                this.formatLyric(lyric)
                // 将整理好的歌词保存在本地
                this.$store.dispatch('saveCurrentLyric',this.formatlyric)
            }
        },
        // 格式化歌词
        formatLyric(lyric_str){
            // 根据换行符进行切割字符串
            let lyric_arr = lyric_str.split("\n");
            // 遍历歌词数组
            for(let i = 0; i < lyric_arr.length; i++){
                // 得到每一行的歌词
                let lyric_row = lyric_arr[i];
                // 将每一行的歌词的时间部分和歌词部分分离
                let lyric_row_arr = lyric_row.split("]");
                // pop()移除数组中最后一个元素并返回该元素
                let lyric_row_text = lyric_row_arr.pop();
                // 处理每行歌词时间
				lyric_row_arr.forEach((item, index) => {
					let LyricRowObj = {};
					let time_arr = item.substr(1, item.length - 1).split(":"); //去掉"[",并且分离出 分钟和秒
					// 将每行歌词时间转换为秒
					let seconds_row = time_arr[0] * 60 + Math.ceil(time_arr[1]);
					// 将每行歌词时间和文本添加到每行歌词对象中
					if (lyric_row_text.trim().length !== 0) {
						LyricRowObj.time = seconds_row;
						LyricRowObj.text = lyric_row_text;
						//再将每行歌词对象添加到数组中
						this.formatlyric.push(LyricRowObj);
					}
				});
            }
            // 根据歌词对象的时间进行排序
            this.formatlyric.sort((lyric1,lyric2) =>{
                return lyric1.time - lyric2.time
            })
        },
        // 显示时间和暂停按钮，传递给当前的播放的行数，
        showTime(index){
            // 设置为活动的
            this.isActive = true
            // 如果当前鼠标指向的行等于当前播放的行，展示
            this.currentIndex = index
        },
        // 点击歌词控制歌词播放
        lyricClick(lyric){
           // 设置歌曲播放的时间
           document.querySelector('audio').currentTime = lyric.time
        }


    },
   
    computed:{
        ...mapState({
            // 歌曲的详情
            nowSongDetail:(state) =>{
                return state.playmusic.nowSongDetail;
            },
            // 歌曲播放状态
            isPlaying:(state)=>{
                return state.playmusic.isPlaying;
            },
            // 获取当前歌曲播放实时的秒数
            currentSecond:state=>state.playmusic.currentSecond,
            // 获取当前歌曲播放的行数
            currentRow:(state) =>{
                return state.playmusic.currentRow;
            },   
            // 获取当前歌曲详情页的状态
            isShowSongDetail:state => state.playmusic.isShowSongDetail

        }),
        cover(){
            return this.nowSongDetail.al.picUrl + '?param=200y200'
        }

    },
    watch:{
        // 监听歌曲的实时播放秒数的变化
       currentSecond(currentSecond) {
				// 遍历格式化后的歌词数组
				this.formatlyric.forEach((item, index) => {
					// 如果歌曲当前秒数和歌词数组中的秒数相等
					// 这里写==可以在使用原生scroll实现歌词滚动的时候不抖动，如果写>=会抖动
					if (Math.ceil(currentSecond) == item.time) {
                        // 保存当前播放的行数，就是当前歌词对象在数组中的索引
						this.$store.dispatch("saveCurrentRow", index); //用于判断当前歌词高亮显示(使用vuex是因为在footer中使用到了currentRow)
						// 当鼠标经过时停止滚动
						if (!this.isActive) {
                           
                            //使用原生scroll实现歌词滚动
                            /*
                             * scrollTo(x,y) : 指定滚动到的x轴和y轴的位置
                               scrollTo(options) ：options有三个参数
                                            top 等同于  y-coord
                                            left 等同于  x-coord
                                            behavior  类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
                             */
                            this.$refs.scrollLyric.scrollTo({
								top: 45 * index,
								behavior: "smooth",// 平滑滚动
							});
							
						}
					}
				});
			
		},
        // 监听歌曲的变化
        nowSongDetail(){
            if (Object.keys(this.nowSongDetail).length != 0) {
                // 从获取新的歌曲资源
                this.formatlyric = [];
                this.getNowPlaingSongLyric(this.nowSongDetail.id);
                // 设置歌词播放的行数
                this.$store.dispatch('saveCurrentRow',0)
            }
        },
        //当打开歌曲详情页时，歌词理解滚动到当前播放的行
        isShowSongDetail(){
            if(this.isShowSongDetail && Object.keys(this.nowSongDetail).length != 0){
                // this.$refs.scrollLyric.scrollTop = 45 * this.currentRow;
                this.$refs.scrollLyric.scrollTop = 45 * this.currentRow;
            }
        }
        
    }
}
</script>
<style lang="less" scoped>
.playing-song-detail{
	position: absolute;
	bottom: 70px;
	left: 0;
	right: 0;
	width: 100%;
	height: calc(100vh - 70px);
	background: #fff;
	z-index: 99;
	overflow-y: scroll;
	// 关闭页面按钮
	.icon-down-arrow {
		position: absolute;
		top: 10px;
		left: 20px;
		font-size: 32px;
		font-weight: 700;
		cursor: pointer;
	}
	// 音乐详情
	.main-content {
		position: relative;
		width: 1350px;
		height: 100%;
		margin: 0 auto;
		.top-lyrics {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 70%;
			height: 500px;
			margin: 0px auto;
			// 旋转唱片
			.left-cover {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 30%;
				.switchs {
					position: absolute;
					left: 50%;
					top: 8%;
					z-index: 2;
					width: 40%;
					transform-origin: 2px 2px; //设置旋转元素的基点位置
					img {
						width: 100%;
					}
				}
				.record {
					position: relative;
					width: 100%;
					.cp2 {
						width: 100%;
					}
					.cover {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						z-index: -1;
						width: 70%;
						border-radius: 50%;
					}
				}
                .song-bgImg{
                    position: absolute;
                    top: 50px;
                    left: -90%;
                    z-index: -1;
                    width: 300%;
                    border-radius: 20%;
                    transform: translate(10%,-50%);
                    // 滤镜效果
					filter: blur(300px) brightness(100%);
                }
			}
            .right-lyrics{
                // border: 1px solid black;
                width: 55%;
                .hd{
                    // border: 1px solid green;
                    text-align: center;
                    div{
                        padding-top: 10px;
                        span{
                            cursor: pointer;
                            color:#5091ca;
                        }
                    }
                }
                // 歌词部分
                .bd{
                    // border: 1px solid blue;
                    margin-top: 20px;
                    height: 315px;
                    text-align: center;
                    overflow-y: scroll;
                    // 有歌词
                    ul{
                        padding: 135px 0;
                        li{
                            display: flex;
                            height: 45px;
                            transition: all 0.3s ease-in;
                            &:hover{
                                cursor: pointer;
                            }
                            .lyric-item {
								flex: 1;
							}
                            .item,.playIcon{
                               
                                width: 50px;
                                height: 50px;
                            }
                            
                        }
                        .currentLyric{
                            font-size: 18px;
                            font-weight: 700;
                        }
                    }
                }
                ::-webkit-scrollbar {
					width: 0px;
				}
                
            }
        }
    }
}

// 唱片旋转动画
.switchRotate{
    // 指定动画暂停
    animation-play-state: paused;
}
// 编写动画效果
.swichsPlay,.switchsPause{
    // 动画从开始到结束都是匀速的
    animation-timing-function: linear;
    // 整个动画持续的时间
    animation-duration: 0.35s;
    // 规定动画结束时，元素应用的样式 （forwards 表示应用元素将应用动画结束的样式）
    animation-fill-mode: forwards;
    // 指定动画正在运行
    animation-play-state: running;
}
.swichsPlay{
    animation-name: switchsPlay;
}
.switchsPause{
    animation-name: switchsPause;
}
// 编写动画规则
@keyframes switchsPlay{
    0%{
        // 设置旋转的角度
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(20deg);
    }
}
@keyframes switchsPause{
    0%{
        transform: rotate(20deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

@keyframes recordRotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.record-rotate{
    // 使用的动画
    animation-name: recordRotate;
    animation-timing-function: linear;
    // 动画一次需要的时间
    animation-duration: 20s;
    // 设置动画的播放次数，infinite 循环播放
    animation-iteration-count: infinite;
    // 动画一开始是暂停的
    animation-play-state: paused;
}
.startRotate {
    animation-play-state: running;
}

</style>